<template>
  <ul class="todo-list">
    <li
      :class="item.done ? 'completed' : ''"
      v-for="item in list"
      :key="item.id"
    >
      <div class="view">
        <input
          class="toggle"
          type="checkbox"
          :checked="item.done"
          @change="changedone(item.id)"
        />
        <label>{{ item.content }}</label>
        <button class="destroy" @click="delById(item.id)"></button>
      </div>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { Todo, Status } from "@/types";
import { defineProps, defineEmits, computed } from "@vue/runtime-core";

const props = defineProps<{ Todos: Todo[]; status: Status }>();
console.log(props.status);

const emit = defineEmits<{
  (event: "changedone", id: number): void;
  (event: "delById", id: number): void;
}>();

const list = computed(() => {
  if (props.status === "all") {
    return props.Todos;
  } else if (props.status === "active") {
    return props.Todos.filter((v) => !v.done);
  } else {
    return props.Todos.filter((v) => v.done);
  }
});

const changedone = (id: number) => emit("changedone", id);
const delById = (id: number) => emit("delById", id);
</script>